<template>
  <el-card shadow="never" class="menu-tree">
    <el-row :gutter="8">
      <el-col :span="24">
        <el-input style="margin-bottom:8px;" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
      </el-col>
    </el-row>

    <el-tree
      v-loading="loading"
      show-checkbox
      draggable
      ref="tree"
      :data="data"
      node-key="id"
      :expand-on-click-node="false"
      @node-click="nodeClick"
      :filter-node-method="filterNode"
    ></el-tree>
  </el-card>
</template>

<script>
import { getMenuList } from '@/api/menu'
import menu from './mixins/menu'

export default {

  mixins: [
    menu
  ],

  data () {
    return {
      // 数据
      data: [],
      // 当前操作
      action: 'save',
      // 过滤文字
      filterText: '',
      // 加载状态
      loading: false
    }
  },

  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },

  mounted () {
    this.load()
  },

  methods: {

    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    load () {
      this.loading = true
      getMenuList({}).then(data => {
        const rows = data
        this.data = rows
        this.loading = false
      })
    },

    nodeClick (obj, node, comp) {
      this.$emit('node-click', obj, node, comp)
    }
  }
}

</script>
<style lang='scss' scoped>
.menu-tree {
  overflow-y: auto;
  min-height: 50vh;
  height: 50vh;
  max-height: 50vh;
  border: 0px;
}
</style>
